Time based motion
fGlobalTime .
Here, we will assume that the time is a float value representing the seconds with fractional par be sub seconds, frames etc...
On the examples below, we will visualise different effect and manipulation by making variation on the x axis
code:example_time.glsl
uv.x += time;
Speed
Multiplying the time by a value:
< 1 will slow down the animation.
> 1 will speed up the animation
https://scrapbox.io/files/64c97c68e9c6a1001cf6b172.gif
code:speed_time.glsl
uv.x += fGlobalTime; // Top
uv.x += fGlobalTime*.5; // Middle
uv.x += fGLobalTime*2.; // Bottom
Separating Floor and Fract value from time
To modify the easing of the time, one famous trick is to separate the integral value and the fractional part of the time value.
code:separate_component_time.glsl
float time = floor(fGlobalTime) + fract(fGlobalTime);
As it is, it doesn't change anything.
But now we have a part, fract(fGlobalTime) , that stay in the domain [0,1] . And it's interesting because we can use functions that take an input defined in [0,1] and return a value between [0,1] but change the slope of the function.
Pow
pow(fract(fGlobalTime),n) , using a value n :
> 1 the motion will accelerate gradually and stop . The larger n is, the more "sharp" the motion will be
< 1 the motion will accelerate suddently and decelerate gradualy. The smaller n is, the more "sharp" the motion will be
https://scrapbox.io/files/64c97b6070e491001be42606.gif
code:pow_time.glsl
uv.x += fGlobalTime; // Top
uv.x += floor(fGlobalTime) + pow(fract(fGlobalTime),4.); // Middle
uv.x += floor(fGlobalTime) + pow(fract(fGlobalTime),1./4.); // Bottom
Smoosthstep
smoothstep(a,b,fract(fGlobalTime)) , using a value a and b with 0 <= a < b <= 1 .
https://scrapbox.io/files/64ca8c5251534c001cc478d3.gif
code:smoothstep_time.glsl
uv.x += fGlobalTime; // Top
uv.x += floor(fGlobalTime) + smoothstep(0.,1.,(fract(fGlobalTime)); // Middle
uv.x += floor(fGlobalTime) + smoothstep(.4,.6,(fract(fGlobalTime)); // Bottom
Composing
Nothing forbit you to compose with the functions seen previously to have more advanced motion.
In general, you can use any function, even going more or less than zero as long as :
It takes as input a value between [0,1]
At x=0, f(x)=>0 and at x=1,f(x)=>1
Your function is somehow continuous on [0,1]
https://scrapbox.io/files/64cbca5947ac73001c659d02.gif
code:compose_time.glsl
uv.x += fGlobalTime; // Top
uv.x += floor(fGlobalTime) + smoothstep(.0,1.,pow(fract(fGlobalTime),2.)); // Middle
uv.x += floor(fGlobalTime) + pow(smoothstep(.0,1.,fract(fGlobalTime)),2.); // Bottom
Other / Findings / unusual
code:unusual.glsl
uv.x +=floor(fGlobalTime)+(fract(fGlobalTime)+cos(-(fGlobalTime)*3.14)*.5);
Motion Blur
One cheap trick to add motion blur is to add to your time some small Random Functions number. https://scrapbox.io/files/64cbcf7fd940da001c845649.gif code:motion_blur_cheap.glsl
float t = fGlobalTime + rand(uv)*.05 // Add some random number to time
uv.x += fGlobalTime; // Top
uv.x += t ; // Middle
uv.x += floor(t)+pow(smoothstep(.0,1.,fract(t)),2.); // Bottom
While this technics can works on real time rendering display, it does makes most of stream encoder crazy, so use it with this side effect in mind.
To explain
Bonzomatic Source Testing
code:bonzomatic_test_time_base_motion.glsl
uniform float fGlobalTime; // in seconds
uniform vec2 v2Resolution; // viewport resolution (in pixels)
uniform float fFrameTime; // duration of the last frame, in seconds
uniform sampler1D texFFT; // towards 0.0 is bass / lower freq, towards 1.0 is higher / treble freq
uniform sampler1D texFFTSmoothed; // this one has longer falloff and less harsh transients
uniform sampler1D texFFTIntegrated; // this is continually increasing
uniform sampler2D texPreviousFrame; // screenshot of the previous frame
uniform sampler2D texChecker;
uniform sampler2D texNoise;
uniform sampler2D texRevision;
uniform sampler2D texTex1;
uniform sampler2D texTex2;
uniform sampler2D texTex3;
uniform sampler2D texTex4;
layout(location = 0) out vec4 out_color; // out_color must be written in order to see anything
float rand(vec2 co){
return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453);
}
void main(void)
{
vec2 uv = vec2(gl_FragCoord.x / v2Resolution.x, gl_FragCoord.y / v2Resolution.y);
uv -= 0.5;
uv /= vec2(v2Resolution.y / v2Resolution.x, 1);
vec3 col = vec3(0.);
uv.x +=.5;
{//Top
vec2 uuv = uv;
float time = fGlobalTime;
uuv.y-=.2;
uuv.x -=mod(time,5.)/5.;
float d = length(uuv)-.05;
d = smoothstep(.001,.0,d);
col += vec3(1.)*d;
}
{ // Middle
vec2 uuv = uv;
float time = fGlobalTime+rand(uv)*.05;
uuv.x -=mod(time,5.)/5.;
float d = length(uuv)-.05;
d = smoothstep(.001,.0,d);
col += vec3(1.)*d;
}
{ // Bottom
vec2 uuv = uv;
float t = fGlobalTime+rand(uv)*.05;
float time = floor(t)+pow(smoothstep(.0,1.,fract(t)),2.);
uuv.y+=.2;
uuv.x -=mod(time,5.)/5.;
float d = length(uuv)-.05;
d = smoothstep(.001,.0,d);
col += vec3(1.)*d;
}
if(abs((fract(uv.x*5.-.5)-.5))<.01) col.r= 1.;
out_color = vec4(col,1.);
}